<template>
  <el-submenu :index="basePath" :popper-append-to-body="true">
    <template #title>
      <i :class="route.meta.icon ? route.meta.icon : ''"></i>
      <span>{{ route.meta.title }}</span>
    </template>
    <template v-for="childrenItem in route.children" :key="childrenItem.path">
      <component
        v-if="!childrenItem.meta.hidden"
        :is="childrenItem.children ? 'subMenu' : 'menuItem'"
        :routes="childrenItem"
        :basePath="
          childrenItem.children ? `${basePath}/${childrenItem.path}` : basePath
        "
      />
    </template>
  </el-submenu>
</template>

<script lang="ts">
import {} from "vue";
import menuItem from "./menuItem.vue";
export default {
  name: "subMenu",
  props: {
    routes: {
      type: Object,
      required: true
    },
    basePath: {
      type: String,
      required: true
    }
  },
  components: {
    menuItem
  },
  setup(props) {
    const route = props.routes;
    return {
      route
    };
  }
};
</script>

<style></style>
